<template>
  <Panel title="商品分类">
    <div slot="btn">
      <el-button type="primary" size="mini" @click="dialogVisible = true"
        >添加分类</el-button
      >
    </div>

    <!-- 主要内容 -->
    <div slot="container">
      <!-- 数据列表 -->
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
      >
        <!-- 序号 -->
        <el-table-column
          type="index"
          width="100"
          label="序号"
        ></el-table-column>
        <!-- 分类名称 -->
        <el-table-column label="分类名称">
          <template slot-scope="scope">
            <span v-if="!scope.row.isEdit">{{ scope.row.cateName }}</span>
            <el-input
              v-else
              v-model="scope.row.cateName"
              placeholder="请输入内容"
              size="mini"
            ></el-input>
          </template>
        </el-table-column>
        <!-- 是否启用 -->
        <el-table-column label="是否启用">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.state"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :disabled="!scope.row.isEdit"
            >
            </el-switch>
          </template>
        </el-table-column>

        <!-- 操作 -->
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.row)"
              :type="!scope.row.isEdit ? 'default' : 'success'"
              >{{ !scope.row.isEdit ? "编辑" : "完成" }}</el-button
            >
            <el-button
              size="mini"
              v-show="scope.row.isEdit"
              @click="scope.row.isEdit = false"
              >取消</el-button
            >
            <el-popconfirm
              title="您确定删除吗?"
              class="ml10"
              @confirm="handleDelete(scope.row.id)"
            >
              <el-button size="mini" type="danger" slot="reference"
                >删除</el-button
              >
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>

      <!-- 对话框 -->
      <el-dialog title="添加分类" :visible.sync="dialogVisible">
        <el-form :model="editCate" size="small">
          <el-form-item label="分类名称" label-width="100px">
            <el-input v-model="editCate.cateName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="是否启用" label-width="100px">
            <el-switch
              v-model="editCate.state"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addCategory">确 定</el-button>
        </div>
      </el-dialog>

      <!-- 分页 -->
      <div class="mt20">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </Panel>
</template>

<script>
import Panel from "@/components/Panel.vue";
import { reqGoodsList, reqAddCate, reqDelCate, reqEditCate } from "@/api/goods";

export default {
  components: {
    Panel,
  },

  data() {
    return {
      // 列表数据
      tableData: [],

      //分页
      currentPage: 1, //当前页码值,一定要以1开始
      pageSize: 5, //每一页显示多少条
      total: 0, //总共条数

      // 对话框
      dialogVisible: false,
      //添加分类数据
      editCate: {
        id: 0,
        cateName: "",
        state: 0,
      },
      value: false,
    };
  },
  created() {
    this.getData();
  },

  methods: {
    //1.获取列表数据
    async getData() {
      //2.发送ajax
      let res = await reqGoodsList({
        currentPage: this.currentPage,
        pageSize: this.pageSize,
      });

      //3.解构
      let { data, total } = res.data;

      //判定---如果把当前页数据清空后,需要回拉一页,显示前一页的数据,如果已经是第一页,不操作
      if (!data.length && this.currentPage != 1) {
        this.currentPage -= 1; //回拉一页
        this.getData(); //重新渲染数据
      }

      //处理数据
      data.map((v) => {
        v.state = v.state ? true : false;
        v.isEdit = false;
      });

      //4.处理数据格式
      //5.把处理好的数据放到指定位置
      this.tableData = data;
      this.total = total;
      console.log(data);
    },

    //添加分类
    async addCategory() {
      this.editCate.state = this.editCate.state ? 1 : 0;
      let res = await reqAddCate(this.editCate);
      //判定
      if (res.data.code == 0) {
        this.dialogVisible = false;
        this.editCate = {};
        this.getData();
      }
    },

    // 分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getData();
    },
    //2.删除功能
    async handleDelete(id) {
      //发送ajax
      let res = await reqDelCate({ id });

      //判定
      if (res.data.code == 0) {
        // this.$message.success(res.data.msg);
        //重新获取数据
        this.getData();
      }
    },
    //编辑功能
    async handleEdit(row) {
      row.isEdit = !row.isEdit;

      ////判定只有点击完成时才进行修改分类操作
      if (!row.isEdit) {
        row.state = row.state ? 1 : 0;
        let res = await reqEditCate(row);
        //修改成功后,进行数据动态渲染
        if (res.data.code == 0) {
          this.getData();
        }
      }
    },

    // //保存修改信息
    // async saveEdit() {
    //   //保存数据
    //   let res = await reqEditAcc(this.editForm);

    //   //判定
    //   if (res.data.code == 0) {
    //     //提示
    //     // this.$message.success(res.data.msg);
    //     this.dialogVisible = false;
    //     this.getData();
    //   }
    // },
  },
};
</script>

<style lang="less" scoped>
.mt20 {
  margin-top: 20px;
}
.ml10 {
  margin-left: 10px;
}
/deep/.el-dialog {
  width: 400px;
}
.el-input {
  width: 194px;
}
</style>